<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>jQuery treeView</title>
	
	<link rel="stylesheet" href="jquery.treeview.css" />
    <link rel="stylesheet" href="red-treeview.css" />
	<link rel="stylesheet" href="screen.css" />
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.cookie.js" type="text/javascript"></script>
	<script src="jquery.treeview.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#gray").treeview({
			control: "#treecontrol",
			persist: "cookie"
		});
	});
	</script>
	<style type="text/css">
	  	#gray.treeview li { background: url(images/gray/tv-item.gif) 0 0 no-repeat; }
	  	#gray.treeview .collapsable { background-image: url(images/gray/tv-collapsable.gif); }
	  	#gray.treeview .expandable { background-image: url(images/gray/tv-expandable.gif); }
	  	#gray.treeview .last { background-image: url(images/gray/tv-item-last.gif); }
	  	#gray.treeview .lastCollapsable { background-image: url(images/gray/tv-collapsable-last.gif); }
	  	#gray.treeview .lastExpandable { background-image: url(images/gray/tv-expandable-last.gif); }
	</style>

<script language="JavaScript">
<!--
	var isChecked = "";
	function viewCheckTreeRec(obj) {
		if ( obj.is('li') ) obj.children().find('input').filter(':first').attr("checked", isChecked ? "checked" : "");
		if ( obj.attr('id') == 'gray' ) return;
		viewCheckTreeRec($(obj).parent());
	}
	function viewCheckTree(obj) {
		isChecked = $(obj).attr("checked") ? true : false;
		if ( isChecked ) viewCheckTreeRec( $(obj).parent() );
	}
	function uncheckAll() {
		$("#gray").children().find('input').attr("checked", "");
	}
	function checkAll() {
		$("#gray").children().find('input').attr("checked", "checked");
	}


//-->
</script>



</head>
<body>
	
<div id="main">
	<h4>Sample 3 - two trees with one tree control, black and gray image set, with cookie-based state-saving</h4>
	<div id="treecontrol">
		<a href="#">Collapse All</a>
		<a href="#">Expand All</a>
		<a href="#">Toggle All</a>
	</div>
	<div>
		<a href="#" onClick="uncheckAll();">unSelect All</a>
		<a href="#" onClick="checkAll();">Select All</a>
	</div>
	<ul id="gray">
		<li>
			<span><input type="checkbox" onClick="viewCheckTree(this);">Item 0</span>
			<ul style="display:none;">
			<li><span><input type="checkbox" onClick="viewCheckTree(this);">Item 1</span></li>
			<li>
				<span><input type="checkbox" onClick="viewCheckTree(this);">Item 2</span>
				<ul style="display:none;">
					<li class="closed">
						<span><input type="checkbox" onClick="viewCheckTree(this);">Item 2.1 (closed at start)</span>
						<ul>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.1.1</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.1.2</li>
						</ul>
					</li>
					<li>
						<span><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.1</span>
						<ul>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.1.1.1</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.1.1.2</li>
						</ul>
					</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.2</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.3</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.4</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.5</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.6</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.7</li>
					<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.2.8</li>
					<li>
						<span><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3</span>
						<ul>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.1</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.2</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.3</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.4</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.5</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.6</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.7</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.8</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.3.9</li>
						</ul>
					</li>
					<li>
						<span><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4</span>
						<ul>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.1</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.2</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.3</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.4</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.5</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.6</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.7</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.8</li>
							<li><input type="checkbox" onClick="viewCheckTree(this);">Item 2.4.9</li>
						</ul>
					</li>
				</ul>
			</li>
		</li>
		<li><input type="checkbox" onClick="viewCheckTree(this);">Item 3</li>
		</ul>
	</ul>
</div>
 
</body></html>